<template>
  <div>
    <div class="!md:m-4 !md:mb-0">
      <CardGrid
        page="endpoint"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        :col-num="3"
        :service-name="serviceName"
        :condition-list="instanceConditions"
      />
    </div>
    <div class="grid grid-cols-4 md:gap-4 !md:m-4">
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="endpoint_cpm"
        :service-name="serviceName"
        :service-instance-name="instanceName"
        :endpoint-name="endpointName"
      />
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="endpoint_avg"
        :service-name="serviceName"
        :service-instance-name="instanceName"
        :endpoint-name="endpointName"
      />
      <LabelLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="endpoint_percentile"
        :service-name="serviceName"
        :service-instance-name="instanceName"
        :endpoint-name="endpointName"
      />
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="endpoint_sla"
        :service-name="serviceName"
        :service-instance-name="instanceName"
        :endpoint-name="endpointName"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import CardGrid from '../cards/CardGrid.vue';
import SingleLineChart from '../../../common/SingleLineChart.vue';
import LabelLineChart from '../../../common/LabelLineChart.vue';

export default defineComponent({
  components: {
    CardGrid,
    SingleLineChart,
    LabelLineChart,
  },
  props: {
    start: String,
    end: String,
    step: String,
    serviceName: String,
    instanceName: String,
    endpointName: String,
  },
  setup(props) {
    const pageName = ref('endpoint');

    const serviceName = ref();
    const instanceName = ref();
    const endpointName = ref();

    const duration = ref();

    const instanceConditions = ref(['endpoint_cpm', 'endpoint_avg', 'endpoint_sla']);

    watch(
      () => [
        props.start,
        props.end,
        props.step,
        props.serviceName,
        props.instanceName,
        props.endpointName,
      ],
      (val) => {
        serviceName.value = val[3];
        instanceName.value = val[4];
        endpointName.value = val[5];
      },
      { immediate: true, deep: true }
    );

    return {
      props,
      pageName,
      duration,
      instanceConditions,
    };
  },
});
</script>
